import { useResizeObserver  } from '@vueuse/core'

export default function (treeWidth) {
  const container = ref()
  const treeRef = ref()
  // const smallTree = ref()
  let tabsWidth = ref(0)
  let containerWidth = ref(0)
  let queryListWidth = ref(0)
  // let smallTreeWidth = ref(0)
  useResizeObserver(container, (entries) => {
    const entry = entries[0]
    const { width } = entry.contentRect
    containerWidth.value = width
    queryListWidth.value = width - treeWidth - 8
    // tabsWidth.value = queryListWidth.value - smallTreeWidth.value -8
  })
  useResizeObserver(treeRef, (entries) => {
    const entry = entries[0]
    const { width } = entry.contentRect
    queryListWidth.value = containerWidth.value - width - 8
    // tabsWidth.value = queryListWidth.value - smallTreeWidth.value - 8
  })

  // useResizeObserver(smallTree, (entries) => {
  //   const entry = entries[0]
  //   const { width } = entry.contentRect
  //   smallTreeWidth.value = width
  // })

  return {
    container,
    treeRef,
    // smallTree,
    // tabsWidth,
    containerWidth,
    queryListWidth,
    // smallTreeWidth
  }
}